<template>
  <div id="app">
    <div id="nav">
      <!-- router-link链接标签  to和main.js里path相同 -->
    </div>
    <transition name="slide-fade">
      <router-view v-on:text="fu" :gettext="text"/>
    </transition>
    <!-- tag可以指定标签为 div或p -->
    <!-- <router-link to="/" tag="div">Home</router-link> |
    <router-link :to="{path:'about',query:{pid:1}}">About</router-link>|
    <router-link :to="{name:'myindex',params:{pid:2}}">我的页面</router-link> -->

    <ul>
      <li v-for="(value,index) in  school" :key="index" 
      @click="toggleRouter($router.options.routes[index].name,index)">
{{value}}
      </li>
    </ul>
  </div>
</template> 
<script>

export default({
  name:"App",
  data() {
    return {
      school: ["首页","关于","我的"],
    };
  },
  created () {
    console.log(this.$router);
  },
  methods: {
    fu(value){
      this.text=value
    },
    toggleRouter(routerName,index){
      console.log(this.$router);
      this.$router.push({name:routerName,params:{data:index}})
    }
  }
})
</script>

<style lang="scss">
@import "./App.scss";
</style>